<!-- 文章列表组件 -->
<template>
  <div>
    <van-cell v-for="(item,idx) in articleList" :key="idx" @click="onClickArticle(item)">
      <div v-if="item.images.length>=3" >
        <div class="article-title">{{item.title}}</div>
        <div style="margin-top: 5px">
          <van-row :gutter="3">
            <van-col v-for="index in 3" :key="index" span="8">
              <van-image class="article-img" fit="cover" :src="item.images[index-1]"/>
            </van-col>
          </van-row>
        </div>
        <van-tag class="img-cnt" text-color="#FFFFFF" plain>{{item.images.length}}图</van-tag>
      </div>
      <div v-else-if="item.images.length>=1 && item.images[0]!==''">
        <van-row :gutter="3">
          <van-col span="14">
            <div class="article-title">{{item.title}}</div>
          </van-col>
          <van-col span="2">
          </van-col>
          <van-col style="text-align: right" span="8">
            <van-image class="article-img" fit="cover" :src="item.images[0]"/>
          </van-col>
        </van-row>
        <van-tag v-if="item.images.length>1" class="img-cnt" text-color="#FFFFFF" plain>{{item.images.length}}图</van-tag>
      </div>
      <div v-else="">
        <div class="article-title">{{item.title}}</div>
      </div>
      <div>
        <van-row>
          <van-col class="sign-left" span="5">
           <span>{{item.author.nick}}</span>
          </van-col>
          <van-col class="sign-left" span="5">
            <span>{{item.readCount}}阅读</span>
          </van-col>
          <van-col class="sign-right" span="14">
            <span>{{$util.getDateDiff(item.time)}}</span>
          </van-col>
        </van-row>
      </div>
    </van-cell>
  </div>
</template>

<script>
export default {
  name: 'ArticleList',
  // 文章列表 是否显示标记
  props: ['articleList', 'showTag'],
  data () {
    return {
      // 标记文本和颜色
      tags: [
        { txt: '中国要闻', color: '#FF8800' },
        { txt: '头条', color: '#0000DD' },
        { txt: '热点', color: '#FF0000' },
        { txt: '情感', color: '#FF00FF' },
        { txt: '旅游日记', color: '#00DD00' }
      ]
    }
  },
  methods: {
    onClickArticle (article) {
      localStorage.setItem('Article', JSON.stringify(article))
      this.$router.push({ path: '/article', query: { id: article.id } })
    }
  }
}
</script>

<style scoped>
  /*文章标题*/
  .article-title{
    font-size: 16px;
  }
  /*文章图片多于3张*/
  .article-img {
    width: 100%;
    height: 80px;
  }
  /*文章图片少于3张*/
  .article-img {
    width: 100%;
    height: 80px;
  }
  /*作者-阅读量*/
  .sign-left{
    text-align: left;
    font-size: 12px;
    color: gray;
  }
  /*发布时间*/
  .sign-right{
    text-align: right;
    font-size: 12px;
    color: gray;
  }
  /*图片数量*/
  .img-cnt{
    color: #FF8800;
    position: absolute;
    bottom: 32px;
    right: 0;
    background-color: rgba(0,0,0,0.2);
  }
</style>
